본문으로 건너뛰기

Deploying Your Next.js App

정보

다음은 Next.js 공식 문서를 참고한 글입니다.

배울 내용​

  • How to deploy your Next.js app to Vercel.
  • The DPS Workflow: Develop, Preview, and Ship.
  • How to deploy your Next.js app to your own hosting provider.

Push to GitHub​

배포하기 전에 앞서, 지금까지 구현한 Next js 앱을 GitHub에 배포해야한다.

Deploy to Vercel​

Vercel

  • Next js를 프로덕션에 배포하는 가장 쉬운 방법은 Vercel 플랫폼을 사용하는 것이다.
  • Vercel은 Headless CMS, 커머스, 데이터 베이스와 통합되도록 구축된 정적 및 하이브리드 앱을 위한 서버리스 플랫폼이다.
  • 프론드엔드 팀이 개발, 미리보기, 출시할 수 있도록 지원하며 신용카드 없이 무료로 사용할 수 있다.

Import your nextjs-blog repository

  • https://vercel.com/import/git에서 해당 repo를 불러온다.
  • 프로젝트 설정은 Vercel에서 자동으로 설정하므로 기본값을 그대로 적용할 수 있다.
  • 배포가 시작되면 몇 분 이내로 끝나고 deployment URLs를 확인할 수 있다.

Next.js and Vercel​

다음은 Vercel에서 Next js를 배포했을 때의 장점이다.

주요기능

  • 정적 생성 및 각종 에셋(JS, CSS, 이미지, 글꼴 등)을 사용하는 페이지는 Vercel의 Edge Network에서 제공된다. 성능을 놀라울정도로 빠르다고 한다. 기회가 되면 플랫폼 별로 성능에 대해 다뤄보면 재밌을 것 같다.
  • SSR과 API Routes가 적용된 페이지는 자동으로 서버리스 함수가 된다. 이를 통해 페이지와 API 요청을 무한대로 확장할 수 있다.

이외에도 다음과 같은 기능을 제공한다고 한다.

  • 커스텀 도메인 기능
  • 환경 변수
  • 오토매틱 HTTPS

Preview Deployment for Every Push

- 브랜치 생성 및 PR을 보내면 vercel 봇의 등장과 함께 Preview URL을 확인할 수 있다고 한다. - PR이 열려 있으면 vercel은 해당 브랜치에 대한 미리보기 배포를 자동으로 생성한다고 한다. - 이를 통해 작업자와 함께 공유하고 즉각적인 피드백을 얻을 수 있다.